<template>
	<view class="sign">
		<image class="imgs" :src="imga"  @tap="uplogimg"></image>
		<view class="main">
			<uni-easyinput class="main-list " v-model="phone" placeholder="请输入手机号"></uni-easyinput>
			<uni-easyinput class="main-list " type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
			<uni-easyinput class="main-list " v-model="username " placeholder="请输入用户名将用于账户登录"></uni-easyinput>
			<uni-easyinput class="main-list " v-model="nickname " placeholder="请输入昵称"></uni-easyinput>
		</view>
		<button @tap="regisTe">注册</button>
		
	</view>
	
</template>

<script>
	import { register } from "@/api/user/login/sign/index.js"
	import  baseurl  from "@/api/baseurl.js"
	import WxValidate from "@/utils/index.js"   //引入表单验证
	export default {
		data() {
			return {
				imga:"", //图片
				username:"", //真实姓名
				nickname:"", //昵称
				password:"", //密码
				phone:"", //手机号
			};
		},
		onLoad(ele) {
			 this.initValidate(); 
		},
		methods:{
		
		//表单验证的方法
		initValidate() {
		    let rules = {
				// 校验手机号
		      phone: {
		        required: true,
				tel:true
		      },
			  // 校验姓名
		      username: {
		        required: true,
		        maxlength: 10
		      }
		      ,
			  // 昵称
		      nickname: {
		        required: true,
		         minlength: 3
		      }, 
			  // 密码
			  password: {
			    required: true,
			     minlength: 5
			  },
		      
		    }
		
		    let message = {
		      phone: {
		        required: '请输入手机号',
		        tel: '手机号格式不正确'
		      },
		      username: {
		        required: '请输入姓名',
		        maxlength: '名字不能超过10个字'
		      },
			  password: {
			    required: '请输入密码', 
			    minlength: '最少5个字符' 
			  },
		      nickname: {
		        required: "请选择您的昵称",
		        minlength: '昵称最少三个字符'
		      }
		      ,
		      
		    }
		    //实例化当前的验证规则和提示消息
		    this.WxValidate = new WxValidate(rules, message);
		  },
			// 点击上传图片
			uplogimg(){
				 var _this = this;
				uni.chooseImage({
					count:1,
					sizeType:["original"],
					sourceType:["album"],
					success(res){
						console.log(res);
					
						var path = res.tempFilePaths[0];
						// 调用APi
						uni.uploadFile({
							url:baseurl+"/lejuClient/login/uploadAvatar",
							// 图片路径
							filePath:path,
							//对应的就是上传时候对应的名字
							name:"file",
							timeout:5000,
							success(res){
								console.log(res);
								_this.imga=JSON.parse(res.data).data.fileUrl
							}
						})
					}
				})
			},
			// 点击注册
			regisTe(){
				
				var obj ={ 
					username:this.username,
					nickname: this.nickname,
					phone : this.phone,
					password:this.password
					
				};
			 if (!this.WxValidate.checkForm(obj)) {
			  //表单元素验证不通过，此处给出相应提示
			    let error = this.WxValidate.errorList;
				console.log(error);
				uni.showToast({
					title:error[0].msg,
					icon:"error"
				})
			   
			  } else {
				  // 验证通过提交注册
				  console.log("点击注册了");
				  register({
				  	  "birthday": "2021-09-16 06:32:37",
				  	  "city": "",
				  	  "createTime": "2021-09-16 06:32:37",
				  	  "email": "",
				  	  "growth": 0,
				  	  "historyIntegration": 0,
				  	  "icon": this.imga,
				  	  "id": "",
				  	  "integration": 0,
				  	  "isDisabled": 0,
				  	  "memberLevelId": "",
				  	  "modifyTime": "2021-09-16 06:32:37",
				  	  "nickname":this.nickname,
				  	  "password": this.password,
				  	  "personalizedSignature": "",
				  	  "phone": this.phone,
				  	  "realname":"",
				  	  "sex": 0,
				  	  "sourceType": 0,
				  	  "status": 0,
				  	  "username": this.username,
				  	  "wxOpenId": ""
				  }).then(res=>{
				  	console.log(res);
				  })
				  
				  
			  }
			 
			
	
				
				
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign{
		.imgs{
			display: block;
			width: 160rpx;
			height: 160rpx;
			background-color: #007AFF;
			border-radius: 50rem;
			margin: 0 auto;
		}
		.main{
			display: flex;
			flex-direction: column;
			align-items: center;
			.main-list{
				width: 80%;
				padding: 40rpx;
			}
		}
		button{
			width: 60%;
			margin: 0 auto;
		}
	}

</style>
